<template>
	<view class="Music">
		<yzt-Input :fun = "click" placeholder="粘贴网易云音乐链接...">解析</yzt-Input>
		<view class="body">
			<text class="txt">{{title}}</text>
			<view class="btn" v-show="!!title" @click="download">下载</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	const title = ref('');
	const url = ref('');
	const click = (val:string)=>{
		title.value = String(val).match(/\《.+\》/g)[0];
		url.value = String(val).match(/\?id=(\d+)/gi)[0].match(/\d+/g)[0];
	}
	const download = ()=>{
		if(!!title.value && !!url.value){
			let src = `https://music.163.com/song/media/outer/url?id=${url.value}.mp3`
			if(plus){
				plus.downloader.createDownload(src,{
					filename:`${Math.random().toString(36).slice(2)}.m4a`,
				},(res,status)=>{
					if(status == 200){
						uni.showToast({
							title:'下载成功!'
						})
					}
				}).start()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Music{
		height: 100%;
		display: flex;
		flex-direction: column;
		.body{
			height: inherit;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $uni-font-size-subtitle;
			.txt{
				margin: $iconSize 0;
			}
			.btn{
				$wh:50vw;
				color: white;
				border-radius: $wh;
				width: $wh;
				height: $wh;
				line-height: $wh;
				text-align: center;
				background-color: $borColor;
				box-shadow: 0 0 $bor $borColor;
			}
			.btn:active{
				box-shadow: none;
			}
		}
	}
</style>
